<template>
  <div class="content">
    <div class="item_box">
      <p><span class="name">司机:</span><span class="content_item">{{items.driverName}}</span></p>
      <p><span class="name">司机号:</span><span class="content_item">{{items.driverNum}}</span></p>
      <p><span class="name">开车时间:</span><span class="content_item">{{items.driverDate}}</span></p>
      <p><span class="name">列车编号:</span><span class="content_item">{{items.trainNum}}</span></p>
      <p><span class="name">副司机名:</span><span class="content_item">{{items.assisDriverName}}</span></p>
      <p><span class="name">车次:</span><span class="content_item">{{items.trainType}}</span></p>
      <p><span class="name">出发站:</span><span class="content_item">{{items.originStation}}</span></p>
      <p><span class="name">到达站:</span><span class="content_item">{{items.terminus}}</span></p>
    </div>
    <div
      style="height: 100%; "
      v-show="currentType === 0"
    >
      <div style="height: 50px; display: flex; align-items: center;">
        <el-input
          v-model="queryForm.name"
          @keyup.enter.native="handleNextName"
          placeholder="事件"
          size="mini"
          style="margin: 0 10px; width: 250px;"
        />
        <el-button
          size="mini"
          type="primary"
          @click="handleNextName"
        >
          Next
        </el-button>
        <!-- <el-button
          size="mini"
          type="primary"
          @click="redirectToVideo"
          v-if="$route.path !== '/analysis/idx/video'"
        >
          定位到视频
        </el-button> -->
      </div>
      <!--新增列表信息展示-->
      <div
        class="itemContent"
        v-if="Object.keys(currentRow).length>0"
      >
      <!-- v-if="currentRow.motorNum&&!this.$route.query.idx" -->
        <div class="item">
          <span class="key">开车日期:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode4"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">车次:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.trainNum"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">机车号:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode18"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">司机号:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode5"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">司机名:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode_sj"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">车型:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.trainType"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">本补:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode15_01"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">计长:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode24"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">数据交路:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode14"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">副司机:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode12"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">副司机名:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.encode_fsj"
            readonly
          >
        </div>
        <!-- <div class="item">
          <span class="key">起点站:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.originStation"
            readonly
          >
        </div>
        <div class="item">
          <span class="key">终点站:</span>
          <input
            class="val"
            type="text"
            v-model="currentRow.terminus"
            readonly
          >
        </div> -->
      </div>
      <!-- :height="currentRow.motorNum&&!this.$route.query.idx?'calc(100% - 125px)':'calc(100% - 50px)'" -->
      <el-table
        :data="currentList"
        border
        ref="table"
        size="mini"
         row-key="id"
         width="100%"
         max-height="500"
        :row-class-name="tableRowClassName"
        :append-number="40"
        @row-click="changeCurrentIndex"
        @row-dblclick="cellDblclick"
        :row-height="25"
      >
              <!-- lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" -->
        <!-- <el-table-column
          label="#"
          type="index"
          :index="(index) => index"
          width="60"
        /> -->
        <el-table-column
          type="index"
          label="#"
          width="60"
          :formatter="indexFormatter">
        </el-table-column>
        <el-table-column
          label="事件"
          prop="eventItem"
          show-overflow-tooltip
          min-width="110"
        />
        <el-table-column
          label="时间"
          prop="time"
          show-overflow-tooltip
          min-width="160"
        />
        <el-table-column
          label="公里标"
          prop="kiloMeter"
          show-overflow-tooltip
          min-width="100"
        />
        <el-table-column
          label="其他"
          prop="other"
          show-overflow-tooltip
          min-width="80"
        />
        <el-table-column
          label="距离"
          prop="distance"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="信号机"
          prop="signalMachine"
          show-overflow-tooltip
          min-width="70"
        />
        <el-table-column
          label="信号"
          prop="signals"
          show-overflow-tooltip
          min-width="50"
        />
        <el-table-column
          label="速度"
          prop="speed"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="限速"
          prop="rateLimit"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="零位"
          prop="zeroBit"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="牵引"
          prop="transaction"
          show-overflow-tooltip
          min-width="50"
        />
        <el-table-column
          label="前后"
          prop="frontBehind"
          show-overflow-tooltip
          min-width="50"
        />
        <el-table-column
          label="管压"
          prop="pipePressure"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="缸压"
          prop="cylinderPressure"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="转速电流"
          prop="speedElectricity"
          show-overflow-tooltip
          min-width="70"
        />
        <el-table-column
          label="均缸1"
          prop="cylinder1"
          show-overflow-tooltip
          min-width="60"
        />
        <el-table-column
          label="均缸2"
          prop="cylinder2"
          show-overflow-tooltip
          min-width="60"
        />
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="pageNum" :page-sizes="[50, 100, 150, 200]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  <div v-show="currentType == 1&&list.length>0">
    <Chart
      :list="currentList"
      :total="queryParams.pageSize"
      :currentType="currentType"
      :indexLKj="currentChartIndex"
      @clickIdxChart="clickIdxChart"
      @changeCurrentIndex="changeCurrentChartIndex"
    >
      <template slot="chartHandle">
        <slot name="chartHandle" />
      </template>
    </Chart>
  </div>
    <el-button
      class="float-btn download"
      type="primary"
      icon="el-icon-download"
      v-show="currentType === 0"
      circle
      @click.native.prevent="download"
    />
    <el-button
      class="float-btn switch"
      type="primary"
      icon="el-icon-s-marketing"
      v-if="currentType === 0"
      circle
      @click.native.prevent="switchTable(1)"
    />
    <el-button
      class="float-btn switch"
      type="primary"
      icon="el-icon-tickets"
      v-if="currentType === 1"
      circle
      @click.native.prevent="switchTable(0)"
    />
    <!-- <el-button class="float-btn switch" type="primary" icon="el-icon-d-caret" v-if="currentType === 2" circle @click="switchTable(0)" /> -->
  </div>
</template>
<script>
import Chart from './Charts/Charts'
import convert from '@/utils/convert'
import axios from 'axios'
export default {
  props:{
    list: {
      type: Array,
      default: []
    },
    items: {
      type: Object,
      default: {}
    },
    lkj: {
      type: String,
      default: ''
    },
    startIndex: {
      type: Number,
      default: 0
    },
    endIndex: {
      type: Number,
      default: 0
    },
    currentTime: {
      type: Number,
      default: '00:00:00'
    },
    // currentIndex: {
    //   type: Number,
    //   default: 0
    // },
    currentChartIndex:{
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 50
    }
  },
  components: {
    Chart
  },
  data(){
    return {
      currentType: this.type,
      Types: {
          LIST: 0,
          CHART: 1,
          ALL: 2
      },
      queryForm: {
        name: ''
      },
      idxList: {},
      currentRow: {},
      currentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      baseURL: ''
    }
  },
  mounted(){
    this.recordId = this.$route.query.recordId?this.$route.query.recordId:''
    let arr = JSON.parse(JSON.stringify(this.list))
    this.currentList = arr.splice(0,this.pageSize)
    console.log('this.currentList',this.currentList)
    // this.currentList.forEach((item,index)=>{
    //   if(index == (this.currentList.length-1)){
    //     item.hasChildren = true
    //   }
    // })
    // Object.values(this.items).forEach(item => {
    //   item.trainNum = item.encode8 + item.encode9
    // })
    this.currentRow = Object.values(this.items)[0] || {}
    // this.lkjIndexList()
    this.queryParams.pageNum = this.pageNum
    this.queryParams.pageSize = this.pageSize
    this.getBaseUrl()
  },
  methods:{
    indexFormatter(row, column, cellValue, index) {
      // 通过row和index来获取当前数据在当前页面的索引
      return (this.list.currentPage - 1) * this.list.pageSize + index + 1;
    },
    getBaseUrl(){
      axios.get('/api/index/quest_url').then(res => {
        this.baseURL = res.data.data
      })
    },
      clickIdxChart(value){
        console.log('全程记录:',value)
        this.$emit('allLogChart',value);
      },
      cellDblclick(row, column, event) {
        this.$emit('cellDblclick',row)
        // row.time
      },
    	handleSizeChange(val) {
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = val
        // this.getTable()
        this.$emit('handleSizeChange',this.queryParams)
			},
			handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.$emit('handleCurrentChange',this.queryParams)
				// this.getTable()
			},
      // load(tree, treeNode, resolve) {
      //   let arr = JSON.parse(JSON.stringify(this.list))
      //   arr = arr.splice(20,arr.length)
      //   setTimeout(() => {
      //     resolve(arr)
      //   }, 1000)
      // },
    download(){
      let filePath = `${this.items.filePath}${this.items.fileName}.txt`
      const url = `${this.baseURL}api/idx/index/downloadLkjFile?filePath=${filePath}`
      this.downFile(url)
    },
    downFile(url){
      const elemIF = document.createElement('a')
      elemIF.href = url
      elemIF.style.display = 'none'
      elemIF.click()
    },
    setCurrentRowIndex(rowIndex) {
      this.queryIndex = rowIndex
      this.changeCurrentIndex(this.items[this.queryIndex])
      // this.currentIndex = rowIndex
      // this.onCurrentIndexChange()
    },
    // lkjIndexList() {
    //   indexRecord({id: this.lkj}).then(res => {
    //     this.currentRow = res.data || {}
    //   })
    // },
    changeCurrentIndex(row) {
      if (!row) return
      const item = row
      const timestamp = convert.toDate(row.time).getTime()
      this.$emit('change-played-time', timestamp)
    },
    tableRowClassName(row, index) {
      if (row.rowIndex > this.startIndex && row.rowIndex < this.endIndex) {
      }
      return row.rowIndex >= this.startIndex && row.rowIndex <= this.endIndex ? 'phaseCls' : ''
    },
    changeCurrentChartIndex(index) {
      const item = this.list[index]
      const timestamp = convert.toDate(item.time).getTime()
      return timestamp
    },
    redirectToVideo() {
      return 0
    },
    switchTable(value) {
      this.currentType = value
      return value
    },
    handleNextName() {
      this.$emit('handleNextName',this.queryForm.name)
      // eventItem
      // const queryIndex = this.items.findIndex((item, index) => index > this.currentIndex && item.eventItem.toLowerCase().includes(this.queryForm.name.toLowerCase()))
      // this.setCurrentRowIndex(queryIndex)
    },
    setCurrentRowIndex(rowIndex) {
      this.queryIndex = rowIndex
      this.changeCurrentIndex(this.items[this.queryIndex])
      this.onCurrentIndexChange()
    }
  },
  watch: {
   'currentType':{
     handler(newV,oldV){
     }
   },
   'list':{
     handler(newV,oldV){
       if(newV){
         let arr = JSON.parse(JSON.stringify(newV))
         if(newV.length>=50){
           this.currentList = arr.splice(0,this.pageSize)
         } else {
           this.currentList = arr
         }
       }
     },
     deep: true
   }
  }
}
</script>
<style scoped>
::v-deep.el-pagination{
  white-space:break-spaces;
}
.content {
  height: 100%;
  width: 100%;
  position: relative;
}
.content .item_box{
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.content .item_box p{
  margin-right: 10px;
}
.content .item_box p .name{
  font-weight: 700;
  font-size: 15px;
  color: #000;
}
.content .item_box p .content_item{
  font-size: 15px;
  color: #666;
}
.content .float-btn {
    position: absolute;
    height: 40px;
    width: 40px;
    right: 15px;
    z-index: 99;
  }
 .content .download {
    bottom: 58vh;
  }
 .content .switch {
    bottom: 65vh;
  }
 content *::-webkit-scrollbar {
    width: 15px;
  }
.content .itemContent{
    min-height: 40px;
    padding-left: 10px;
}
.content .itemContent   .item{
  display: inline-block;
  padding: 5px 8px;
  margin-right: 10px;
}
.content .itemContent .item span{
  display: inline-block;
  font-size: 12px;
}

.content .itemContent span.key{
  min-width: 60px;
  text-align: right;
  margin-right: 5px;
  font-size: 12px;
}
.content .itemContent input.val{
  width: 120px;
  font-size: 12px;
  padding: 3px 5px;
  color: #666;
  border-radius: 3px;
  border-style: none;
  border: 1px solid #ccc;
  outline-color: #316ac5;
}
</style>

